<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        body {
            background: radial-gradient(#888, #555, #333);
            /* 景深 */
            perspective: 1000px;
            /* 视角 */
            perspective-origin: 50% 50%;
        }

        @keyframes rot {
            form {
                transform: rotateX(0)rotateY(0);
            }

            to {
                transform: rotateX(360deg)rotateY(360deg);
            }
        }

        #main {
            width: 300px;
            height: 300px;
            margin: 300px auto;
            /* background-color: olive; */
            position: relative;
            animation: rot 10s infinite;
            transform-style: preserve-3d;
        }

        #main>div {
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #aaa;
            box-shadow: 5px 5px 10px white;
            background-image: url("./F`KETURELE59U7(_9R19F4L.gif");
            background-size: 100% 100%;
            opacity: 0.5;
        }

        div.forward {
            transform: translateZ(150px);
        }

        div.backward {
            transform: translateZ(-150px);
        }

        div.left {
            transform: translateX(-150px) rotateY(-90deg);
        }

        div.right {
            transform: translateX(150px)rotateY(90deg);
        }

        div.up {
            transform: translateY(-150px) rotateX(-90deg);
        }

        div.down {
            transform: translateY(150px)rotateX(90deg);
        }
        .back-homepage{
            position: fixed;
            top: 30px;
            left: 10px;
            width: 45px;
            height: 45px;
            background-color: #1e5eb5;
            border-radius: 5px;
            text-align: center;
            opacity: 0.7;
        }
        .back-homepage span{
            margin: 0;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div class="back-homepage">
        <span><a href="../index.html">返回主页</a></span>
    </div>
    <div id="main">
        <div class="forward"></div>
        <div class="backward"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="up"></div>
        <div class="down"></div>
    </div>
</body>

</html>